<template>
    <commonDrawer
     title="编辑服务号"
     :drawer="drawer"
     @closeDraw="openOrCloseDrawer"
     @cancelFun="drawer=false"
     @save="save">
      <template slot="column">
        <el-form class="m7-form" :model="drawerData.form" size="mini" ref="formRef" label-position="top">
          <el-form-item label="服务号" prop="number">
            <el-input size="mini" type="text" v-model.trim="drawerData.form.number" placeholder="请输入服务号" disabled></el-input>
          </el-form-item>
          <el-form-item label="别名" prop="name">
            <el-input size="mini" v-model.trim="drawerData.form.name" placeholder="请输入别名"></el-input>
          </el-form-item>
          <el-form-item label="语音导航" prop="ivrId">
            <m7Select style="width:100%" filterable  size="mini" v-model="drawerData.form.ivrId" placeholder="请选择" :options="voiceNavArr" :defaultProps="{ label: 'name', value: '_id' }"></m7Select>
          </el-form-item>
        </el-form>
      </template>
  </commonDrawer>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { NumberModule } from '@/store/modules/config/number'
import commonDrawer from '@/common/views/drawer/index.vue'
interface DrawerData {
  form: {
    number: string
    name: string
    ivrId: string
  }
}
@Component({
  name: 'VoiceDetial',
  components: { commonDrawer }
})
export default class ServiceDetial extends Vue {
  [x: string]: any
  @Prop({ default: {} }) private drawerData!: DrawerData
  private drawer: boolean = false // 抽屉控制值
  private voiceNavArr: object[] = [{}] // 语音导航数据列表

  private openOrCloseDrawer () { // 打开或者是关闭抽屉 || 父组件调用
    this.drawer = !this.drawer
    this.$nextTick(() => {
      (this as any).$refs.formRef.clearValidate()
    })
  }

  public openDrawer () {
    this.openOrCloseDrawer()
    this.getIvrList() // 每次打开从弹窗从服务端拉取可配置的导航列表
  }

  private save () { // 保存服务号
    (this as any).$refs.formRef.validate((valid: boolean) => {
      if (valid) {
        const data = { url: '/call/action/config/serviceNumber/update', method: 'POST', data: this.drawerData.form }
        NumberModule.NumberCommonAction(data).then((res: any) => {
          if (res && res.success) {
            this.$emit('refresh')
            this.drawer = false
            this.$message({ message: '保存成功', type: 'success' })
            this.$updateCache('serviceNumberList', this.drawerData.form, '_id', false)
          }
        })
      } else {
        return false
      }
    })
  }

  private handleClose () { // 关闭抽屉
    this.drawer = false
  }

  private getIvrList () {
    this.$getCache('/call/action/general/query', ['ivrList'], false, true).then((res: any) => {
      if (res && res.success) {
        this.voiceNavArr = res.ivrList || []
      }
    })
  }
}
</script>
